<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px" >
			<div class="topNav">
				<el-button type="text" size="small" @click="importHandle">导出excel</el-button>
				<el-button type="text" icon="el-icon-search" size="small" style="float:right;" @click="getList">搜索</el-button>
			</div>
			<el-form-item label="查询时间" prop="time">
				<el-date-picker  v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-select size="small" v-model="queryParams.orderState" placeholder="请选择状态" filterable clearable >
					<el-option v-for="item in stateList" :key="item.id" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="sku">
				<el-input v-model="queryParams.sku" placeholder="输入sku" clearable size="small"
					@keyup.enter.native="getList" />
			</el-form-item>			
		</el-form>
		<el-table :data="list" border  :maxHeight="tableMaxHeight">
			<el-table-column label="商品名称" align="center" prop="goodsName" width="150px"></el-table-column>
			<el-table-column label="品牌名称" align="center" prop="categoryName"></el-table-column>
			<el-table-column label="sku" align="center" prop="sku"></el-table-column>
			<el-table-column label="下单人" align="center" prop="name"></el-table-column>
			<el-table-column label="组织" align="center" prop="purchaseName"></el-table-column>
			<el-table-column label="下单时间" align="center" prop="createTime"  width="155px"></el-table-column>
			<el-table-column label="品牌名称" align="center" prop="brandName"></el-table-column>
			<el-table-column label="型号" align="center" prop="typeNo"></el-table-column>
			<el-table-column label="数量" align="center" prop="buyNum"></el-table-column>
			<el-table-column label="计量单位" align="center" prop="unit"></el-table-column>
			<el-table-column label="未税单价" align="center" prop="excludeTaxPrice"></el-table-column>
			<el-table-column label="单价" align="center" prop="price"></el-table-column>
			<el-table-column label="未税总价" align="center" prop="sumExcludeTaxPrice"></el-table-column>
			<el-table-column label="总价" align="center" prop="budget"></el-table-column>
			<el-table-column label="税率" align="center" prop="taxRate"></el-table-column>
			<el-table-column label="商品备注" align="center" prop="remark"></el-table-column>
			<el-table-column label="税率" align="center" prop="taxRate"></el-table-column>
			<el-table-column label="商品来源" align="center" prop="goodsSource"></el-table-column>
			<el-table-column label="订单编号" align="center" prop="orderNo"></el-table-column>
			<el-table-column label="订单状态" align="center" prop="orderState"></el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		selGoodItemBySKU,
		selGoodItemBySKUExport
	} from "@/api/leader/leaderapi";
	export default {
		name: "orgPriceList",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					beginTime: "",
					endTime: "",
					orderState: "",
					sku:""
				},
				loading: false,
				stateList: [{
					value: "A1003",
					label: "提交订单"
				}, {
					value: "A1102",
					label: "已完成"
				}, {
					value: "A1101",
					label: "等待收货"
				},{
					value: "A1002",
					label: "预占订单"
				}],
				orderDetail: {},
				countOrderNo: '',
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				orderCountOutList: []
			};
		},
		computed:{
			//表格最大高度
			tableMaxHeight() {
				return window.innerHeight - 320
			}
		},
		// 初始化
		mounted() {
			this.getList();
		},
		// 函数集合
		methods: {
			//初始化列表
			getList() {
				//传入订单详情和分页数据
				this.queryParams.beginTime = this.timeModel[0]
				this.queryParams.endTime = this.timeModel[1]
				
				let params = {
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime,
					orderState: this.queryParams.orderState,
					sku: this.queryParams.sku
				}

				console.log('111', params)
				selGoodItemBySKU(params).then(res => {
					console.log('114', res)
					this.list = res.rows
					this.total = res.total
					console.log('116', this.list)
				})
			},
			// 保存下载文件
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = filename
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 导出订单
			importHandle() {
				if (this.timeModel) {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}
				let newSearch = {
					beginTime: this.queryParams.beginTime ? this.queryParams.beginTime : '',
					endTime: this.queryParams.endTime ? this.queryParams.endTime : '',
					orderState: this.queryParams.orderState ? this.queryParams.orderState : '',
					sku: this.queryParams.sku ? this.queryParams.sku :'',
				}
				selGoodItemBySKUExport(newSearch).then((res) => {
					let blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '到处列表.xls')
				})
			}

		}
	}
</script>

<style>
	/* 	.el-col {
		font-size: 14px;
		margin: 10px 0px;

	} */

	.grid-content {
		/* border: 1px solid #dfe6ec; */
		padding: 0.25em 1.5em;
		/* margin-right: 0px !important; */
		margin-bottom: 0px !important;
	}

	.el-table-column {
		padding: 16px 0px;
	}
</style>
